<template>
  <div>
    <el-input
      v-model="name"
      :size="size"
      suffix-icon="el-icon-setting"
      :placeholder="placeholder || 'SMS平台配置选择'"
      readonly
      :disabled="disabled"
      @click="handleSelect"
    ></el-input>
    <!-- SMS平台配置弹窗 -->
    <sms-service-select-dialog
      ref="sms-service-select"
      :check-type="checkType"
      :default-checked="modelValue"
      @onConfirm="handleSelectConfirm"
    ></sms-service-select-dialog>
  </div>
</template>
<script>
import SmsServiceSelectDialog from '@/components/sms-service-select-dialog/main.vue';
import { getDetail } from '@/api/sms/service-config';

export default {
  name: 'sms-service-select',
  components: { SmsServiceSelectDialog },
  emits: ['update:modelValue'],
  props: {
    modelValue: [String, Number],
    checkType: {
      // radio单选 checkbox多选
      type: String,
      default: () => {
        return 'radio';
      }
    },
    size: {
      type: String,
      default: () => {
        return 'default';
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: String,
    change: Function
  },
  watch: {
    modelValue: {
      handler(val) {
        if (val) {
          const name = [];
          const checks = (val + '').split(',');
          const asyncList = [];
          checks.forEach(c => {
            asyncList.push(getDetail(c));
          });
          Promise.all(asyncList).then(res => {
            res.forEach(r => {
              const data = r.data.data;
              if (data) name.push(data.remark);
            });
            this.name = name.join(',');
          });
        } else this.name = '';
      },
      immediate: true
    }
  },
  data() {
    return {
      name: ''
    };
  },
  methods: {
    handleSelect() {
      if (this.readonly || this.disabled) return;
      else this.$refs['sms-service-select'].visible = true;
    },
    handleSelectConfirm(id) {
      this.$emit('update:modelValue', id);
      if (this.change && typeof this.change == 'function') this.change({ value: id });
    }
  }
};
</script>
<style lang="scss"></style>
